<template>
  <div class="top">
    <div class="top-part" v-for="(item, index) of data.topList" :class="data.topIndex == index ? 'active' : ''" @click="topClick(index)">{{ item.name }}</div>
  </div>
  <div class="wrap">
    <div class="left">
      <div v-for="(title,index) of data.list" :key="title.id" :class="['title', activeIndex == index ? 'active' : '']" @click="clickHandle(index)">{{ title.name }}</div>
    </div>
    <div class="right" v-if="isRightShow">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="overflow-y: scroll;height: calc(100vh - 90px);"
      >
        <div class="content" v-for="item of data.proList" :key="item.news_id" v-if="data.proList.length > 0" @click="goDetail(item.video_id)">
          <img :src="item.image" alt="" style="width: 100%;display:block;">
          <div class="content-top">{{ item.title }}</div>
          <div class="content-desc">
            <span>作者：{{ item.author }}</span>
            <span>发布：{{ item.createtime }}</span>
            <span>浏览：{{ item.nums }}</span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, computed } from 'vue';
import { getVideoCate, getVideoList } from '@/api.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeIndex = ref(0)
const data = reactive({
  list: [],
  page: 0,
  limit: 5,
  proList: [],
  topIndex: 0
})
const isRightShow = ref(false)
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  data.page ++
  getRightList()
}
const goDetail = (id) => {
  router.push('/videoDetail?id=' + id)
}
const topClick = index => {
  if (data.topIndex == index) return;
  data.topIndex = index
  data.list = data.topList[data.topIndex].children
  if (activeIndex.value > data.list.length - 1) {
    activeIndex.value = data.list.length - 1
  }
  data.page = 0
  finished.value = false
  data.proList = []
}
const clickHandle = (index) => {
  if(activeIndex.value == index) return;
  data.page = 0;
  activeIndex.value = index;
  finished.value = false;
  data.proList = []
}
const computedStyle = computed(() => {
  return {
    'background': data.list.length > 0 && `url(${data.list[activeIndex.value].image}) no-repeat`,
    'background-size': '100% 100%'
  }
})
const getRightList = () => {
  const id = data.list[activeIndex.value]['id']
  getVideoList({id, page: data.page, limit: data.limit}).then(res => {
    data.proList = data.proList.concat(res.data.list)
    if (data.proList.length >= res.data.total) {
      finished.value = true
    } else {
      finished.value = false
    }
    loading.value = false
  })
}
onBeforeMount(async () => {
  await getVideoCate().then(res => {
    data.topList = res.data
    data.list = data.topList[data.topIndex].children
    isRightShow.value = true
  })
})
</script>
<style scoped>
.wrap {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.top {
  height: 50px;
  line-height: 50px;
  display: flex;
}
.top-part {
  flex: 1;
  text-align: center;
  background: #DADADA;
  color: #000;
}
.top-part.active {
  background: #47A2FF;
  color: #fff;
}
.left {
  width: 120px;
  background-color: #D2E7FB;
}
.right {
  flex: 1;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
}
.title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.title.active {
  background-color: #47A2FF;
  color: #fff;
}
.top-img {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-size: cover;
  letter-spacing: 8px;
  font-weight: 700;
  margin: 4px 10px;
}
.content {
  margin: 10px;
  box-sizing: border-box;
  overflow-y: scroll;
}
/* .right .content:nth-child(2n) {
  background-color: #F6F6F6;
}
.right .contetn:nth-child(2n+1) {
  background-color: #fff;
} */
.content-desc {
  font-size: 10px;
  color: #6A6A6A;
  margin-top: 10px;
}
.content-top {
  background-color: #F6F6F6;
  padding: 10px 5px;
}
.content-desc>span:nth-child(2) {
  margin: 0 5px;
}
.no-desc {
  text-align: center;
  color: #999;
  margin-top: 10px;
}
</style>